<template>
	<view class="con-box">
		<view class="per-info">
			<view class="">
				个人信息
			</view>
			<view class="publisher">
				<image class="avatar" :src="userInfo.avatar" mode=""></image>
				<view class="content">
					<view>{{ userInfo.nickname }}</view>
					<!-- <view class="create-time">{{ list.create_time }}</view> -->
				</view>
			</view>
		</view>
		<view class="">
			<view class="rea-solitaire">
				<view class="rea-soitem">
					<view class="rea-content">
						<input placeholder="请输入团购标题" type="text" value="" />
					</view>
					<view class="rea-content">
						<textarea value="" placeholder="请输入文章" />
					</view>
					<view class="">
						上传图片
					</view>
					<view class="">
						团购商品
					</view>
				</view>
			</view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">商品1名称</view>
					<input type="text" class="input" placeholder="请输入本人真实姓名作为店名" :value="name" @blur="blur"
						placeholder-style="color:#fa2424" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">价格</view>
					<input type="text" class="input" placeholder="请输入本人真实姓名作为店名" :value="name" @blur="blur"
						placeholder-style="color:#fa2424" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">商品详情</view>
					<view class="input">
						<view class="logoStore" v-if="islogo">
							<view mode="aspectFill" @click='remove(0)' class='remove cross-center main-center'>x</view>
							<image class="image" :src="logoStore" @click='previewImage(0)'></image>
						</view>
						<app-upload-image @cancelon="can" v-else height="170" minheight="170" :islogo="false"
							:value="logoStore" :showNumber="false" @image-event="uploadlogo" maxNum="1" margin="0">
						</app-upload-image>
					</view>
				</view>
				<view class='goods-info'>
					<view class='info-item main-between' v-if="form.type === 'goods'">
						<view>多规格</view>
						<switch style="transform:scale(0.7)" :checked="set_attr" @change="set_attr = !set_attr">
						</switch>
					</view>
					<view v-if="set_attr && form.type === 'goods'" class='info-item cross-center main-between'>
						<view class="form-label">商品规格</view>
						<view @click="chooseAttr">
							<view class='cat-info dir-right-nowrap cross-center'>
								<image class="to-more" src='/static/image/icon/arrow-right.png'></image>
								<text v-if="attr">已设置</text>
								<text style="color: #cdcdcd" v-else>未设置，点击设置</text>
							</view>
						</view>
					</view>
					<view v-if="!set_attr && form.type === 'goods'" class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">规格</view>
						<view class='dir-left-nowrap cross-center price-input'>
							<input class='input' placeholder-style="color: #cdcdcd"
								v-model='form.attr_default_name'></input>
						</view>
					</view>
					<view class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">成本价</view>
						<view class='dir-left-nowrap price-input cross-center main-between'>
							<input @change="costChange" placeholder-style="color: #cdcdcd" placeholder="请输入成本价"
								type='digit' class='input' v-model="form.cost_price"></input>
							<view>元</view>
						</view>
					</view>
					<view class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">原价</view>
						<view class='dir-left-nowrap price-input cross-center main-between'>
							<input @change="originalChange" placeholder-style="color: #cdcdcd" placeholder="请输入原价"
								type='digit' class='input' v-model="form.original_price"></input>
							<view>元</view>
						</view>
					</view>
					<view class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">售价</view>
						<view class='dir-left-nowrap price-input cross-center main-between'>
							<input @change="priceChange" placeholder-style="color: #cdcdcd" placeholder="请输入售价"
								type='digit' class='input' v-model="form.price"></input>
							<view>元</view>
						</view>
					</view>
					<view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">库存</view>
						<view class='dir-left-nowrap price-input cross-center main-between'>
							<input placeholder-style="color: #cdcdcd" placeholder="请输入库存" type='number'
								v-model="form.goods_num" class='input unit'></input>
							<view class="unit-width">{{unit}}</view>
						</view>
					</view>
					<view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">货号</view>
						<view class='dir-left-nowrap price-input cross-center'>
							<input placeholder-style="color: #cdcdcd" placeholder="请输入货号" class='input'
								v-model="form.goods_no"></input>
						</view>
					</view>
					<view v-if="!set_attr && form.type === 'goods'" class='info-item cross-center dir-left-nowrap'>
						<view class="form-label">重量</view>
						<view class='dir-left-nowrap cross-center price-input'>
							<input placeholder-style="color: #cdcdcd" placeholder="请输入重量" type='number'
								v-model='form.goods_weight' class='input'></input>
							<view>g</view>
						</view>
					</view>
				</view>
				<view class="fbottom">
					<view class="fname">规格</view>
					<input type="number" class="input" placeholder="请输入联系电话" :value="phone" @blur="phoneblur"
						placeholder-style="style" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">库存</view>
					<picker class="input" mode="region" @change="regionChange" :value="region" :disabled="disabled">
						<view>{{regionid.length == 0?'请选择所在地区':address}}</view>
					</picker>
				</view>
			</view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">店铺名</view>
					<input type="text" class="input" placeholder="请输入本人真实姓名作为店名" :value="name" @blur="blur"
						placeholder-style="color:#fa2424" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">精品店头像</view>
					<view class="input">
						<view class="logoStore" v-if="islogo">
							<view mode="aspectFill" @click='remove(0)' class='remove cross-center main-center'>x</view>
							<image class="image" :src="logoStore" @click='previewImage(0)'></image>
						</view>
						<app-upload-image @cancelon="can" v-else height="170" minheight="170" :islogo="false"
							:value="logoStore" :showNumber="false" @image-event="uploadlogo" maxNum="1" margin="0">
						</app-upload-image>
					</view>
				</view>
				<view class="fbottom">
					<view class="fname">手机号</view>
					<input type="number" class="input" placeholder="请输入联系电话" :value="phone" @blur="phoneblur"
						placeholder-style="style" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">地址</view>
					<picker class="input" mode="region" @change="regionChange" :value="region" :disabled="disabled">
						<view>{{regionid.length == 0?'请选择所在地区':address}}</view>
					</picker>
				</view>
			</view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">个人简介</view>
					<textarea class="input" placeholder="请输入个人简介(仅此一次，不可修改)" placeholder-class="peditext"
						name="introduction" @input="introcon" style="height:144rpx" :value="introduction"
						:disabled="disabled" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="">
				<view class="rea-btn">
					保存
				</view>
				<view class="rea-btn">
					发布
				</view>
			</view>
			<view class="" style="height: 152rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isCard: false,
				list: {
					nickName: '你猜',
					create_time: '1998-09-01'
				},
				lists: [{
					id: 24,
					openid: {
						id: 2,
						nickName: '你猜',
						avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						realname: null,
						tel: null,
						address: '',
					},
					childgoodlist: [{
						name: 'mingzi',
						cover_pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png'
					}],
					buy_date: 'NULL ',
					pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png',
					content: '大家好，互助下单，疫情之下，邻里和睦',
					is_send: 1,
					is_master: 0,
					comts: [{
							id: 33,
							openid: {
								id: 4,
								nickName: '你猜',
								avatarUrl: 'https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/2lZ9GXssnuO2Bhic4KS0FM03iaah67mkldq864ncskg38mlULmNvON2yVgTOm2oMyHFQNYzrrmeUF7Dvl0OBFv2w\/132',
								realname: null,
								tel: null,
								address: '',
							},
							jl_id: '24',
							address: '2。201',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: '快递在小区门口谢谢',
							detail: [{
									name: '取快递',
									danwei: '次',
									price: '1',
									num: '1',
								},
								{
									name: '代扔垃圾',
									danwei: '次',
									price: '1',
									num: '1',
								},
								{
									name: '遛狗',
									danwei: '次',
									price: '1',
									num: '1',
								}
							]
						},
						{
							id: 32,
							openid: {
								id: 2,
								nickName: '你猜',
								avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
								realname: null,
								tel: null,
							},
							jl_id: '24',
							address: '1-922',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: ''
						}
					],
					my_orders: [],
					total_orders: 2,
					create_time: '1998-09-01'
				}]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			})
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			routeGo() {
				uni.navigateTo({
					url: '/plugins/solitaire/goods/addgoods'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.con-box {
		width: 100%;
		// padding: 0 24rpx;
	}

	.per-info {
		width: 100%;
		padding: 24rpx;
		font-size: 26rpx;

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			align-items: center;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.all-box {
		// width: 702rpx;
		// margin: 0 auto;
		width: 100%;
		padding: 0 24rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;

		.cla-item {
			padding: 0 24rpx;
		}
	}

	.reatime {
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;

		.text-orange {
			display: inline-block;
			background: #f37b1d;
			width: 8rpx;
			height: 28rpx;
		}

		.action {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.basicf {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 42rpx 0;
		width: 702rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 16rpx;
	}

	.fbottom {
		width: 654rpx;
		margin: 0 auto;
		padding: 24rpx;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.fbottom .fname {
		width: 200rpx;
	}

	.fbottom .input {
		width: 454rpx;
	}

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	.rea-btn {
		position: fixed;
		bottom: 24rpx;
		left: 24rpx;
		width: 702rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #09ba07;
		border-radius: 72rpx;
		margin: 24rpx auto;
	}

	.rea-solitaire {
		margin: 24rpx;

		.rea-soitem {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
		}

		.rea-content {
			font-size: 28rpx;
			border-bottom: 2rpx solid #F2F2F2;

			.b-image {
				width: 100%;
				height: 200rpx;
			}
		}

		.rea-btn {
			position: fixed;
			bottom: 24rpx;
			left: 24rpx;
			width: 702rpx;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: #09ba07;
			border-radius: 72rpx;
			margin: 24rpx auto;
		}

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			background-color: #ffffff;
			align-items: center;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.solitaireor {
		font-size: 28rpx;

		.so-item {
			display: flex;
			align-items: center;

			.so-avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.so-content {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
	}

	.soli-else {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		line-height: 60rpx;
	}

	.discuss {
		.discuss-item {
			font-size: 28rpx;
			display: flex;

			.dis-avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 16rpx;
			}

			.dis-content {
				.dis-name {
					line-height: 76rpx;
					font-size: 28rpx;
					color: #888888;
				}

				.dis-dec {
					font-size: 28rpx;
				}
			}
		}
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			// align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 100%;
			height: 216rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 216rpx;
				height: 216rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
				margin-right: 24rpx;
			}
		}
	}
</style>
